本篇介紹Bootstrap5 UI的Modal(彈出互動視窗)呼叫方式

起手式

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>

先介紹一般官網寫法

官網寫法

HTML

• 在要觸發Modal的目標上綁定data-bs-toggle="modal"與data-bs-target這兩個屬性
• data-bs-target對應Modal本身id

  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
    Open modal
  </button>
  
<!-- The Modal -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

這樣就完成啦！

▲附上w3schools範例程式碼

那其實我看了一下也可以這樣寫

JS寫法

HTML

• 無事先綁定data-bs-toggle="modal"與data-bs-target這兩個屬性
• 靠的是JS，並使用官網中.show()方法叫出視窗

 <button id="myModal" class="btn btn-primary" type="button">點我打開視窗1</button>
 
<!-- Model模板 -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

JS

 let myModal = document.getElementById("myModal");
 let exampleModal = new bootstrap.Modal(document.getElementById('exampleModal'));

myModal.addEventListener("click", function(e){
  exampleModal.show();
});

這樣也可以！

那我們加一點難度，使用Vue3 + 將Model寫成元試看看

Vue3

HTML

<main id="app">
    <button class="btn btn-primary" type="button" @click="showModal">點開視窗1</button>

    <modal ref="exampleModal" :parent-title="h1Title" parent-txt="我是訊息視窗內容" v-on:emit-hide="hideModal"></model>
</main>

觀念

為什麼我們要剛要先介紹 new bootstrap.Modal的寫法呢?因為我們在vue會用到
vue範例有用到的觀念有
1.想要去取得某個 Dom 的資訊，可以使用 ref 這個 Attr，父層元件則可以透過 this.$refs來取得子元件
2.Props 父傳子
3.$emit 子傳父

VUE

const app = Vue.createApp({
  
  data(){
    return {
      h1Title:"快搭上姐姐的`微`前端便車",
      isActive:true,
      modal: null
    }
  },
   mounted() {
    this.modal = new bootstrap.Modal(this.$refs.exampleModal.$el)
  },
   methods: {
  	showModal(){ 
      this.modal.show();
    },
     hideModal(){
       this.modal.hide();
     }
  }
  
});

app.component("modal",{
 props:["parentTitle","parentTxt"], 
  methods:{
    hidemodelInner(){
      console.log("內層事件被觸發");
      this.$emit("emit-hide");
    }
  },
  template:` 
  <div class="modal fade" id="exampleModal" ref="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"> {{ parentTitle }}</h5>
        <button type="button" class="btn-close" @click="hidemodelInner()" aria-label="Close"></button>
      </div>
      <div class="modal-body">
       {{ parentTxt }}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" @click="hidemodelInner()">關閉</button>
      </div>
    </div>
  </div>
</div>`
  
})
app.mount("#app")

這樣就完成啦！

附上程式碼

YA！看完這篇，本系列文章就倒數3天惹！

本篇參考文章:

• Bootstrap 5 modal in Vue.js 3
  https://blog.droidzone.in/2021/06/21/bootstrap-5-modal-in-vue-js-3/